import React from "react";
import { storiesOf } from "@storybook/react";
// import { action } from "@storybook/addon-actions";//记录组件行为
import Input from "./input";
import '../../styles/index.scss'

const styles = {
  textAlign: 'center',
  padding: 24
}
//配置样式，使组件居中显示
const centerDecorator = (storyFn) => <div style={styles}>
  {(storyFn())}
</div>

const defaultInput = () => {
  return <Input placeholder={"请输入"} style={{ width: 300 }} />;
};

const sizeInput = () => {
  return <>
  <Input placeholder={"请输入"} size={"sm"} style={{ width: 300 }} />
  <br/>
  <Input placeholder={"请输入"} size={"lg"} style={{width:300}}/>
  </>;
};

const prepandInput = () => {
  return <>
  <Input placeholder={"请输入"} prepand="http://" style={{ width: 300 }} />
  <br/>
  <Input placeholder={"请输入"} append=".com" style={{ width: 300 }} />
  </>;
};

const IconInput=()=>{
  return <Input placeholder={"请输入"} icon="search" style={{ width: 300 }}  />
}

const disableInput=()=>{
  return <Input placeholder={"请输入"} disabled={true} style={{ width: 300 }}  />
}




storiesOf("Input Component", module)
  .addDecorator(centerDecorator)
  .add("默认输入框", defaultInput)
  .add("不同尺寸",sizeInput)
  .add("前后缀",prepandInput)
  .add("图标",IconInput)
  .add('禁用input',disableInput);

